<template>
	<view class="record-container">
		<view class="search">
			<view class="search-box">
				<view class="icon">
					<image src="../../static/search.png"></image>
				</view>
				<input v-model="searchText" @confirm="handleSearch" type="text" class="search-input" confirm-type="search" placeholder="请输入房屋号">
			</view>
			<view class="new-room" @click="goCreateRoom">新建</view>
		</view>
		<!-- 全部 -->
		<resident-list @detail="goDetail" @delete="onDelete" v-if="roomList" :roomList="roomList"></resident-list>
		<view v-else>
			<van-empty description="暂无房屋" />
		</view>
		<uni-load-more v-if="roomList && roomList.length >= 20" :status="status" />
	</view>
</template>

<script>
	import DeanPopover from '../components/dean-popover/dean-popover.vue'
	import TabNav from '../components/tab-nav/tab-nav.vue'
	import residentList from '../components/residentList'
	export default {
		components: {
			residentList
		},
		data() {
			return {
				status: 'more',
				checkName: null,
				searchText: '',
				roomList: [],
				params: {
					网格id: null,
					检查点id: null,
					pagination: {
						current: 1,
						pageSize: 20
					},
					sorter: {
						field: "id",
						order: 0
					}
				}
				// btnList: ['全部','装修申请','装修验收','故障报修','上门回收','消防安全','保洁清理','设备安装']
			}
		},
		onLoad(options) {
			this.checkName = options.checkName
			if(options.checkName) {
				uni.setStorageSync('checkName', options.checkName)
			}
			this.params.网格id = uni.getStorageSync('gridInfo').所属网格id
			this.params.检查点id = +options.id
			this.getRoomList()
		},
		onReachBottom() {
			// console.log('触发上拉')
			if(this.status !== 'noMore' && this.roomList) {
				this.status = 'loading'
				this.getMoreRoomList()
			}
		},
		watch: {
			searchText() {
				if(this.searchText == ''){
					this.params.房主名称 = null
					this.params.房屋号 = null
					this.getRoomList()
				}
			}
		},
		methods: {
			goDetail(id) {
				// console.log(id)
				uni.navigateTo({
					url: '../roomDetail/roomDetail?id=' + id + '&checkId=' + this.params.检查点id + '&checkName=' + this.checkName
				})
			},
			onDelete(id) {
				this.$common.showModal('确定要删除该房屋吗?', this.deleteRoom, id)
			},
			deleteRoom(id) {
				this.$http.post('gridSystem/room/delete', {房屋id: id}).then(res => {
					if(res.code === 10000){
						uni.showToast({
							title: '删除成功'
						})
						this.getRoomList()
					}else if(res.code === 50012) {
						uni.showToast({
							title: '删除失败,请先清空住户',
							icon: 'none'
						})
					}
				})
			},
			goCreateRoom() {
				uni.navigateTo({
					url: '../createRoom/createRoom?id=' + this.params.检查点id
				})
			},
			getRoomList() {
				this.$http.post('gridSystem/room/list', this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						if(res.data.list !== null) {
							res.data.list.forEach(item => {
								if(item.分区号 !== '' && !item.分区号.includes('区')){
									item.分区号 = item.分区号 + '区'
								}
								if(!item.楼栋号.includes('栋')){
									item.楼栋号 = item.楼栋号 + '栋'
								}
								if(item.单元号 !== '' && !item.单元号.includes('单元')){
									item.单元号 = item.单元号 + '单元'
								}
								item.房屋名 = item.分区号 + item.楼栋号 + item.单元号 + item.房屋号
							})
						}
						this.roomList = res.data.list
					}
				})
			},
			getMoreRoomList() {
				this.params.pagination.current++
				this.$http.post('gridSystem/room/list', this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						if(res.data.list !== null) {
							res.data.list.forEach(item => {
								if(item.分区号 !== '' && !item.分区号.includes('区')){
									item.分区号 = item.分区号 + '区'
								}
								if(!item.楼栋号.includes('栋')){
									item.楼栋号 = item.楼栋号 + '栋'
								}
								if(item.单元号 !== '' && !item.单元号.includes('单元')){
									item.单元号 = item.单元号 + '单元'
								}
								item.房屋名 = item.分区号 + item.楼栋号 + item.单元号 + item.房屋号
							})
						}
						this.roomList = [...this.roomList, ...res.data.list]
						if(this.roomList.length == res.data.total) {
							this.status = 'noMore'
						}
					}
				})
			},
			handleSearch(e) {
				// this.params.房主名称 = this.searchText
				this.params.房屋号 = this.searchText
				this.getRoomList()
				console.log('触发搜索')
			},
			handleCancel() {
				console.log('阻止冒泡')
			},
			setTabIndex(val) {
				this.tabCurrentIndex = val
			}
		},
		components: {
			DeanPopover,
			TabNav
		}
	}
</script>

<style lang="scss">
	.van-empty {
		background-color: #fff;
	}
	.record-container {
		// padding-top: 68rpx;
		background-color: #f5f5f5;
		// padding-bottom: 20rpx;
		.new-room {
			color: #3080FB;
			margin-left: 34rpx;
		}
		.search {
			// margin-left: 100rpx;
			width: 750rpx;
			height: 96rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-left: 50rpx;
			margin-bottom: 20rpx;
			.search-box {
				width: 564rpx;
				height: 56rpx;
				padding-left: 17rpx;
				padding-right: 20rpx;
				// background-color: pink;
				border: 2rpx solid #595959;
				border-radius: 28rpx;
				display: flex;
				.icon {
					width: 50rpx;
					height: 46rpx;
					margin-top: 3rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.search-input {
					flex: 1;
					height: 100%;
					color: #999;
				}
				.pop {
					position: absolute;
					right: 60rpx;
				}
			}
		}
	}
</style>
